<template>
  <div class="container">
    <div class="bookClass">
      <div class="weui-cells weui-cells_after-title">
        <radio-group @change="radioChange">
          <label class="weui-cell weui-check__label" v-for="(item,index) in radioItems" :key="index">
            <radio class="weui-check" :value="item.value" :checked="item.checked" />
            <div class="weui-cell__bd">{{item.name}}</div>
            <div class="weui-cell__ft weui-cell__ft_in-radio" v-if="item.checked">
              <icon type="success" size="23"></icon>
            </div>
             <div class="weui-cell__ft weui-cell__ft_in-radio" v-else>
              <icon type="circle" size="23"></icon>
            </div>
          </label>
        </radio-group>
        <div class="btnWrap">
          <navigator url="/pages/editbook/main">
             <div class="grayBtn">+ 自定义分类</div>
          </navigator>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tabBar from '../../components/tabbar'

export default {
  data () {
    return {
      motto: 'Hello World',
      userInfo: {},
      tabs: ['全部', '已读', '工具书','历史书'],
      activeIndex: 0,
      fontSize: 30,
      show:false,
      bookList:[1,2,3,4,5,6,7,8],

      radioItems: [
        { name: '工具书', value: '0' ,checked: true},
        { name: '历史书', value: '1' ,checked: false},
        { name: '交互书', value: '2' ,checked: false}
      ],
    }
  },
  components: {
    tabBar
  },
  computed: {

  },
  onShow () {
    console.log(`INDEX`)
  },
  methods: {
     tabClick(e) {
      console.log(e);
      this.activeIndex = Number(e.currentTarget.id);
    },
    radioChange(e) {
      console.log('radio发生change事件，携带value值为：' + e.mp.detail.value);
      let radioItems = this.radioItems;
      for (let i = 0; i < radioItems.length; ++i) {
        radioItems[i].checked = radioItems[i].value === e.mp.detail.value;
      }
      this.radioItems = radioItems;
    },
  },

}
</script>

<style scoped lang="less">
.container{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  .bookClass{
    width:100%;
    box-sizing:border-box;
    padding:32rpx;
    // .classList{
    //   padding: 0 32rpx;
    //   background: #fff;
    //   border-radius:16rpx;
    //   li{
    //     height: 96rpx;
    //     line-height: 96rpx;
    //     border-bottom:1rpx solid #EAEAEA;
    //     color:#222222;
    //     font-size:34rpx;
    //   }
    // }
    .btnWrap{
      padding:0 32rpx 1rpx;
      border-top:1rpx solid #EAEAEA;
    }
    .grayBtn{
      width:202rpx;
      height: 70rpx;
      background: #CECECE;
      line-height: 70rpx;
      text-align: center;
      font-size:28rpx;
      color:#fff;
      margin: 32rpx auto;
    }
  }
}
</style>
